<template>
  <div class="box">
    <el-container>
      <el-header style="height: 110px;background-color: white">
        <div class="permission_text">权限管理</div>
        <div class="Breadcrumb"><span>首页</span><span>/</span><span>权限管理</span><span>/</span><span>人员管理</span></div>
      </el-header>


      <div class="table_pad">
        <el-main style="height: 700px;width: 1220px; background-color: white">
          <!--main的名字-->
          <div><span class="subhead">角色管理</span></div>
          <div class="line"></div>
          <!--<el-button type="text" @click="open">打开嵌套表单的 Dialog</el-button>-->
          <el-button
            type="success"
            style="margin-bottom: 15px"
            @click="dialogFormVisible = true">
            添加角色
          </el-button>
          <!--列表-->
          <el-table
            :data="list"
            border
            style="width: 100%">
            <el-table-column
              fixed
              align="center"
              prop="rid"
              label="序号"
              width="100">
              <template slot-scope="scope">
                <span v-if="!scope.row.isEgdit">{{scope.row.rid}}</span>
                <el-input v-if="scope.row.isEgdit" v-model="scope.row.id"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="rname"
              label="角色名称"
              width="200">
              <template slot-scope="scope">
                <span v-if="!scope.row.isEgdit">{{scope.row.rname}}</span>
                <el-input v-if="scope.row.isEgdit" v-model="scope.row.rname"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="rposition"
              label="角色描述"
              width="670">
              <template slot-scope="scope">
                <span v-if="!scope.row.isEgdit">{{scope.row.rexplain}}</span>
                <el-input v-if="scope.row.isEgdit" v-model="scope.row.rexplain"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="200">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">权限设置</el-button>
                <!--<el-button type="text" @click="open">点击打开 Message Box</el-button>-->
                <el-button v-if="!scope.row.isEgdit" type="text" size="small" @click='edit(scope.$index,scope.row)'>编辑
                </el-button>
                <el-button v-if="scope.row.isEgdit" type="text" size="small"
                           @click='editSuccess(scope.$index,scope.row)' icon="el-icon-check"
                           style="width: 58px;height: 40px;background-color: #66b1ff"></el-button>
                <el-button type="text" size="small" @click="openn(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>


          <el-dialog title="权限设置"
                     :visible.sync="dialogTableVisible"
                     :before-close="handleClose">
            <div slot="footer" class="dialog-footer">

              <div class="Role_table">

                <el-tree
                  v-loading="loading"
                  :data="data"
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="[1, 3]"
                  :default-checked-keys="keyRole"
                  :props="defaultProps">
                </el-tree>

                <br/><br/><br/>
              </div>
              <el-button @click="dialogTableVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
            </div>
          </el-dialog>


          <!--增加角色框-->
          <el-dialog title="增加角色"
                     :visible.sync="dialogFormVisible"
                     :before-close="handleClose"
                     align="center">
            <el-form :form="form">
              <!--<el-form-item label="rid" :label-width="formLabelWidth">-->
              <!--<el-input v-model="form.id" autocomplete="off" style="width: 300px"></el-input>-->
              <!--</el-form-item>-->
              <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" style="width: 300px"></el-input>
              </el-form-item>
              <el-form-item label="角色描述" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :rows="1"
                  placeholder="请输入内容"
                  v-model="form.textarea"
                  style="width: 300px">
                </el-input>
                <!--<el-input v-model="form.region" autocomplete="off" style="width: 300px;height: 250px"></el-input>-->
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="add">确 定</el-button>
            </div>
          </el-dialog>

        </el-main>
      </div>
    </el-container>


  </div>
</template>

<script>
  export default {
    name: "role_management",
    data() {
      return {
        keyRole:[2,39,38,37,36,35,51],
        list: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        isEgdit: false,
        textarea: '',
        form: {
          name: '',
          textarea: ''
        },
        formLabelWidth: '120px',
        loading: true,

        //权限管理模板
        data: [{
          id: 1,
          label: '商品信息基础设置',
          children: [{
            id: 10,
            label: '石料基础设置',
            children: [{
              id: 29,
              label: '新增'
            }, {
              id: 30,
              label: '删除'
            }]
          },
            {
              id: 11,
              label: '商品基础设置',
              children: [{
                id: 31,
                label: '新增'
              }, {
                id: 32,
                label: '删除'
              }]
            },
            {
              id: 12,
              label: '产品编码表',
              children: [{
                id: 33,
                label: '新增'
              }, {
                id: 34,
                label: '删除'
              }]
            },
            {
              id: 13,
              label: '批发石料价管理',
              children: [{
                id: 35,
                label: '新增'
              }, {
                id: 36,
                label: '查询'
              }, {
                id: 37,
                label: '删除'
              }]
            },
            {
              id: 14,
              label: '批发销售工费管理',
              children: [{
                id: 38,
                label: '新增'
              }, {
                id: 39,
                label: '删除'
              }]
            }]
        }, {
          id: 2,
          label: '门店基础设置',
        }, {
          id: 3,
          label: '员工基础设置',
        },
          {
            id: 4,
            label: '供应商基础设置',
          },
          {
            id: 5,
            label: '权限管理',
            children: [{
              id: 15,
              label: '角色管理'
            }, {
              id: 16,
              label: '权限设置'
            }]
          },
          {
            id: 6,
            label: '更改密码',
          },
          {
            id: 7,
            label: '商品管理',
            children: [{
              id: 17,
              label: '商品入库',
              children: [{
                id: 40,
                label: '查询'
              },
                {
                  id: 41,
                  label: '新增'
                }]
            }, {
              id: 18,
              label: '采购退货'
            }, {
              id: 19,
              label: '商品拆料'
            }, {
              id: 20,
              label: '配货出库'
            }, {
              id: 21,
              label: '商品销售'
            }, {
              id: 22,
              label: '销售退货'
            }, {
              id: 23,
              label: '商品调价'
            }, {
              id: 24,
              label: '门店调拨'
            }, {
              id: 25,
              label: '门店退货'
            }, {
              id: 26,
              label: '库存盘点'
            }, {
              id: 27,
              label: '库存统计'
            }, {
              id: 28,
              label: '库存查询'
            }
            ]
          },
          {
            id: 8,
            label: '数据分析',
          },
          {
            id: 9,
            label: '利润核算',
          }

        ],



        defaultProps: {
          children: 'children',
          label: 'label'
        }

      }
    },
    methods: {
      // 权限设置
      handleClick(row) {

        this.dialogTableVisible = true;
        console.log(row.rid);
        this.keyRole=[];
        //数据库里面查询权限
        let data = {
          id: row.rid
        }

        this.$axios.post("http://172.16.6.69:8080/power/findByRole",data,
          {
            transformRequest: [
              function (data) {
                let params = "";
                var arr = [];
                for (var key in data) {
                  arr.push(key + "=" + data[key]);
                }
                params = arr.join("&");
                return params;
              }
            ]
          }, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
          .then((res) => {
            console.log(res);
            // console.log(a);

            for (var i = 0; i < res.data.data.powers.length; i++) {
              for (var j = 0;j<res.data.data.powers[i].children.length;j++){
                for (var n = 0;n<res.data.data.powers[i].children[j].children.length;n++){
                  if (res.data.data.powers[i].children[j].children[n].have == true){
                    var c = res.data.data.powers[i].children[j].children[n].power_id;
                    // console.log(c);
                    this.keyRole.push(c);
                  }
                }
                if (res.data.data.powers[i].children[j].have == true){
                  var b= res.data.data.powers[i].children[j].power_id;
                  // console.log(b);
                  this.keyRole.push(b);
                }
              }
              if (res.data.data.powers[i].have == true) {
                var a = res.data.data.powers[i].power_id;
                // console.log(a);
              this.keyRole.push(a);
              }

            }

            console.log(this.keyRole.__ob__.value);

            this.loading = false;
          }).catch((err) => {
          console.log(err);
        })
        // default-checked-keys

      },

      //增加
      add() {
        this.dialogFormVisible = false;
        console.log(this.form.name);
        console.log(this.form.textarea);
        console.log(this.form);
        //   // this.list.push({id: this.form.id,roleName: this.form.name ,roleDescription: this.form.textarea});
        this.list.push({rname: this.form.name, rexplain: this.form.textarea});
        // //   var a = {rname:this.form.name ,rposition:this.form.textarea}
        // // console.log(a);
        // // console.log(this.list);
        // // this.form.id = this.form.name = this.form.textarea = "";


        // 添加进数据库

        let data = {
          rname: this.form.name,
          rexplain: this.form.textarea
        }

        this.$axios.post("http://172.16.6.69:8080/role/add", data,
          {
            transformRequest: [
              function (data) {
                let params = "";
                var arr = [];
                for (var key in data) {
                  arr.push(key + "=" + data[key]);
                }
                params = arr.join("&");
                return params;
              }
            ]
          }, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
          .then((res) => {
            console.log(res);
            // console.log(a);

          }).catch((err) => {
          console.log(err);
        })
        this.form.name = this.form.textarea = "";
      },

      //编辑
      edit(index, row) {
        this.$set(row, 'isEgdit', true);

      },

      //编辑成功
      editSuccess(index, row) {
        this.$set(row, 'isEgdit', false);
        console.log(row);

        //编辑数据库
        console.log(this.list[index].rid);
        console.log(row.rname);
        console.log(row.rexplain);
        let data = {
          rid: this.list[index].rid,
          rname: row.rname,
          rexplain: row.rexplain
          // role_name:this.list[row]
        }

        this.$axios.post("http://172.16.6.69:8080/role/alter", data,
          {
            transformRequest: [
              function (data) {
                let params = "";
                var arr = [];
                for (var key in data) {
                  arr.push(key + "=" + data[key]);
                }
                params = arr.join("&");
                return params;
              }
            ]
          }, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
          .then((res) => {
            console.log(res);
            // console.log(a);

          }).catch((err) => {
          console.log(err);
        })

      },

      //删除
      del(index) {
        this.list.splice(index, 1);
        // let obj = new Object();
        // obj.rid = index;
        // console.log(obj.rid);
        console.log(this.list[index].rid);
        let data = {
          id: this.list[index].rid
        };
        this.$axios.post("http://172.16.6.69:8080/role/delete", data,
          {
            transformRequest: [
              function (data) {
                let params = "";
                var arr = [];
                for (var key in data) {
                  arr.push(key + "=" + data[key]);
                }
                params = arr.join("&");
                return params;
              }
            ]
          }, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
          .then((res) => {
            console.log(res);
            // console.log(a);

          }).catch((err) => {
          console.log(err);
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      open() {
        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '保存',
          cancelButtonText: '放弃修改'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '保存修改'
            });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃保存并离开页面'
                : '停留在当前页面'
            })
          });
      },
      openn(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.del(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }


    },


    beforeMount() {
      // this.$axios.get("/static/Role.json?")
      //   .then((res)=>{
      //     console.log(res.data);
      //     this.list = res.data;
      //   }).catch((err)=>{
      //   console.log(err);
      // })


      // let data={
      //   id:1
      // }


      // axios

      this.$axios.post("http://172.16.6.69:8080/role/findAll",
        {
          transformRequest: [
            function (data) {
              let params = "";
              var arr = [];
              for (var key in data) {
                arr.push(key + "=" + data[key]);
              }
              params = arr.join("&");
              return params;
            }
          ]
        }, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        .then((res) => {
          console.log(res.data.data.roles);
          // console.log(a);
          this.list = res.data.data.roles;
        }).catch((err) => {
        console.log(err);
      })


      // this.$axios.post("http://172.16.6.69:8080/power/findpower" ,
      //   {
      //     transformRequest: [
      //       function (data) {
      //         let params = "";
      //         var arr = [];
      //         for (var key in data) {
      //           arr.push(key + "=" + data[key]);
      //         }
      //         params = arr.join("&");
      //         return params;
      //       }
      //     ]
      //   }, {
      //     headers: {
      //       'Content-Type': 'application/x-www-form-urlencoded'
      //     }
      //   }).then((res) => {
      //   console.log(res);
      //   this.list = res.data;
      // });


    }



//       beforeMount:function(){
// //        this.$axios.post(this.$api.employee_basics.employee)
// //          .then(
// //          (response)=>{
// //            console.log(123);
// //            console.log(response);
// //            this.tableData=response.data;
// //          }
// //        ).catch(
// //          (err)=>{
// //            console.log(err);
// //          }
// //        )
//         this.$axios.post("http://172.16.6.69:8080/employee_c/all_employee",{
//           transformRequest:[
//             function(data){
//               let params = "";
//               var arr = [];
//               for(var key in data){
//                 arr.push(key+"="+data[key]);
//               }
//               params = arr.join("&");
//               return params;
//             }
//           ]
//         }).then(
//           (res=>{
//               console.log(123);
//               if(res.data.code == 200){
//                 this.tableData=res.data.data.data;
//                 console.log(res);
//                 for (var i=0;i<res.data.data.data.length;i++){
// //                console.log(res.data.data.data.employeeGroup.employee_group_name);
//                   var groupname=res.data.data.data[i].employeeGroup.employee_group_name;
//                   this.gruoplist.push(groupname)
//                 }
//
//                 for(var z = 0; z < this.gruoplist.length; z++){
//                   if(this.temp.indexOf(this.gruoplist[z]) == -1){
//                     this.temp.push(this.gruoplist[z]);
//                   }
//                 }
//
//                 console.log(this.temp);
//
//                 console.log(this.tableData)
//
//
//               }
//
//             }
//           )
//         ).catch(
//           (err)=>{
//             console.log(err);
//           }
//         );
//       }

  }
</script>

<style scoped>
  .box {
    background-color: #f6f6f6;
    width: 85%;
    min-height: 600px;
  }

  .table_pad {
    margin-left: 35px;
    margin-top: 40px;
  }

  .permission_text {
    font-size: 30px;
    padding-top: 20px;
    padding-left: 15px;
  }

  .subhead {
    font-size: 24px;
  }

  .line {
    margin-top: 10px;
    margin-bottom: 30px;
    border-top: 1px solid #DADADA;
  }

  .Breadcrumb {
    font-size: 12px;
    margin-top: 10px;
    margin-left: 10px;
    color: #999999;
  }

  .Breadcrumb span {
    margin-left: 10px;
  }

  .Breadcrumb span:nth-of-type(1), .Breadcrumb span:nth-of-type(3) {
    color: #3380FF;
  }

  table.gridtable {
    font-family: verdana, arial, sans-serif;
    color: #333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
    text-align: center;
  }

  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #ECEEF5;
    width: 300px;
    background-color: #F2F2F2;
  }

  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #ECEEF5;
    font-size: 11px;
  }

  .Role_table {

  }
</style>

